<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<head>
	<title>チャットページ</title>
</head>
<script type="text/javascript" src="http://<?=hostName?>:<?=portIo?>/socket.io/socket.io.js"></script>
<script type="text/javascript">
/** 文字列をサニタイズする */
var sanitize = function(data){
	var reg = /[&<>"]/g,
		charSanitizeSet = {
			'&': '&amp;',
			'"': '&quot',
			'<': '&lt;',
			'>': '&gt;'
			
		},
		charSanitize = function(c){
			return charSanitizeSet[c];
		};
	return data.replace(reg, charSanitize);
};
</script>
<script type="text/javascript">
window.onload = function(){
	var socketChat = io.connect('http://<?=hostName?>:<?=portIo?>'),
		elementInput = document.getElementById('input'),
		elementSend = document.getElementById('send'),
		elementChat = document.getElementById('chat');
	
	/* サーバからメッセージ（キーワード 'message'）を受取った時の処理 */
	socketChat.on('message', function(data){
		/* テキストエリア（ID 'chat'）へデータの書き込み */
		elementChat.innerHTML += '<li>' + sanitize(data) + '</li>';
	});
	
	/* ボタン（ID 'send'）を押したときの処理 */
	elementSend.onclick = function(){
		/* サーバへメッセージ（キーワード 'send'）を送る */
		/* 入力フィールド（ID 'input'）のデータを書き込む */
		socketChat.emit('send', elementInput.value);
		elementInput.value = '';
	};
}
</script>
<body>
	チャットページ！！<br />
	<input id="input" type="text" value="send message"></input>
	<input id="send" type="button" value="send"></input><br />
	<ol id="chat"></ol>
</body>
</html>